
/** 动态显示
 * @ 标  识: hchhIOT
 * @ 作  者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
 */

/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import * as d3 from "d3";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { } from "@/functions"

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端定义引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { CoordinateType, CtrlIconType, SvgPelInfoEquip } from '@/defines'

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useWorkStore } from "@/store/workStore"; // 工作数据

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const canvasStore = useCanvasStore(); // 画布
const workStore = useWorkStore(); // 设备数据

/* ================================================================================================ */
//                                函数
/* ================================================================================================ */
//

/** 选中显示 */
export const onShowSelected = () => {
 // console.log(`图元显示-选中显示`)
  canvasStore.ctrlIconDataSet = []; //清理控制图标集
  /** 选择键集合 */
  let selectKeys = JSON.parse(JSON.stringify(canvasStore.selectKeys));

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 遍历图元数据
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  for (let indexA = 0; indexA < workStore.pels.length; indexA++) {
    const pelInfo = workStore.pels[indexA];
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 ★ 遍历选择键
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    for (let indexB = 0; indexB < selectKeys.length; indexB++) {
      const SelectedKey = selectKeys[indexB];
      /** 图元类型 */
      let PelType = pelInfo.type;
      if (pelInfo.key === SelectedKey) {

        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 🐸 ★ ★ 判断图元类型
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        if (PelType === "horizontaLine" /*水平线*/) {
         // console.log(pelInfo.place)

          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          // 🐸 ★ ★ 起点-控制图标
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          let StartIco: CtrlIconType = {
            /** 图元类型 */
            type: PelType,
            /** 图元键 */
            key: SelectedKey,
            /** 标识 */
            label: "start",
            /** 位置 */
            coordinate: {
              x: pelInfo.place.l.x,
              y: pelInfo.place.l.y,
            },
            /** 光标 */
            cursor: "e-resize",
            /** 图标 */
            icon: "Rect",
            /** 属性 */
            pelInfo: pelInfo,
          };
          canvasStore.ctrlIconDataSet.push(StartIco);

          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          // 🐸 ★ ★ 终点-控制图标
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          let EndIco: CtrlIconType = {
            /** 图元类型 */
            type: PelType,
            /** 图元键 */
            key: SelectedKey,
            /** 标识 */
            label: "end",
            /** 位置 */
            coordinate: {
              x: pelInfo.place.r.x,
              y: pelInfo.place.r.y,
            },
            /** 光标 */
            cursor: "w-resize",
            /** 图标 */
            icon: "Rect",
            /** 属性 */
            pelInfo: pelInfo,
          };
          canvasStore.ctrlIconDataSet.push(EndIco);
        };
        if (PelType === "verticalLine" /*垂直线*/) {
         // console.log(pelInfo.place)

          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          // 🐸 ★ ★ 起点-控制图标
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          let StartIco: CtrlIconType = {
            /** 图元类型 */
            type: PelType,
            /** 图元键 */
            key: SelectedKey,
            /** 标识 */
            label: "start",
            /** 位置 */
            coordinate: {
              x: pelInfo.place.tm.x,
              y: pelInfo.place.tm.y,
            },
            /** 光标 */
            cursor: "n-resize",
            /** 图标 */
            icon: "Rect",
            /** 属性 */
            pelInfo: pelInfo,
          };
          canvasStore.ctrlIconDataSet.push(StartIco);

          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          // 🐸 ★ ★ 终点-控制图标
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          let EndIco: CtrlIconType = {
            /** 图元类型 */
            type: PelType,
            /** 图元键 */
            key: SelectedKey,
            /** 标识 */
            label: "end",
            /** 位置 */
            coordinate: {
              x: pelInfo.place.bm.x,
              y: pelInfo.place.bm.y,
            },
            /** 光标 */
            cursor: "s-resize",
            /** 图标 */
            icon: "Rect",
            /** 属性 */
            pelInfo: pelInfo,
          };
          canvasStore.ctrlIconDataSet.push(EndIco);
        }
        if (PelType === "slantLine" /*斜线*/) {
         // console.log(pelInfo.place)
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          // 🐸 ★ ★ 起点-控制图标
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          let StartIco: CtrlIconType = {
            /** 图元类型 */
            type: PelType,
            /** 图元键 */
            key: SelectedKey,
            /** 标识 */
            label: "start",
            /** 位置 */
            coordinate: {
              x: pelInfo.place.tl.x,
              y: pelInfo.place.tl.y,
            },
            /** 光标 */
            cursor: "move",
            /** 图标 */
            icon: "Rect",
            /** 属性 */
            pelInfo: pelInfo,
          };
          canvasStore.ctrlIconDataSet.push(StartIco);


          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          // 🐸 ★ ★ 终点-控制图标
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          let EndIco: CtrlIconType = {
            /** 图元类型 */
            type: PelType,
            /** 图元键 */
            key: SelectedKey,
            label: "end",
            /** 位置 */
            coordinate: {
              x: pelInfo.place.br.x,
              y: pelInfo.place.br.y,
            },
            /** 光标 */
            cursor: "move",
            /** 图标 */
            icon: "Rect",
            /** 属性 */
            pelInfo: pelInfo,
          };
          canvasStore.ctrlIconDataSet.push(EndIco);
        }
        if (PelType === "circle" /*圆*/) {
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          // 🐸 ★ ★ 移动图标
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          let MoveIcon: CtrlIconType = {
            /** 图元类型 */
            type: PelType,
            /** 图元键 */
            key: SelectedKey,
            /** 标识 */
            label: "moveFrame",
            /** 位置 */
            coordinate: {
              x: pelInfo.place.tl.x,
              y: pelInfo.place.tl.y,
            },
            /** 光标 */
            cursor: "move",
            /** 图标 */
            icon: "moveFrame",
            /** 属性 */
            pelInfo: pelInfo,
          };
          canvasStore.ctrlIconDataSet.push(MoveIcon);

        }
        if (PelType === "ellipse" /*椭圆*/) {

          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          // 🐸 ★ ★ 上-控制图标
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          let TopIcon: CtrlIconType = {
            /** 图元类型 */
            type: PelType,
            /** 图元键 */
            key: SelectedKey,
            /** 标识 */
            label: "top",
            /** 位置 */
            coordinate: {
              x: pelInfo.place.tm.x,
              y: pelInfo.place.tm.y,
            },
            /** 光标 */
            cursor: "n-resize",
            /** 图标 */
            icon: "Rect",
            /** 属性 */
            pelInfo: pelInfo,
          };
          canvasStore.ctrlIconDataSet.push(TopIcon);

        }
        if (PelType === "arc" /*三点弧线*/) {
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          // 🐸 ★ ★ 起点-控制图标
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          let TopIcon: CtrlIconType = {
            /** 图元类型 */
            type: PelType,
            /** 图元键 */
            key: SelectedKey,
            /** 标识 */
            label: "start",
            /** 位置 */
            coordinate: {
              x: pelInfo.place.start.x,
              y: pelInfo.place.start.y,
            },
            /** 光标 */
            cursor: "move",
            /** 图标 */
            icon: "circle",
            /** 属性 */
            pelInfo: pelInfo,
          };
          canvasStore.ctrlIconDataSet.push(TopIcon);

          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          // 🐸 ★ ★ 控制点-控制图标
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          let RightIcon: CtrlIconType = {
            /** 图元类型 */
            type: PelType,
            /** 图元键 */
            key: SelectedKey,
            /** 标识 */
            label: "ctrl",
            /** 位置 */
            coordinate: {
              x: pelInfo.place.ctrl.x,
              y: pelInfo.place.ctrl.y,
            },
            /** 光标 */
            cursor: "move",
            /** 图标 */
            icon: "circle",
            /** 属性 */
            pelInfo: pelInfo,
          };
          canvasStore.ctrlIconDataSet.push(RightIcon);

          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          // 🐸 ★ ★ 终点-控制图标
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          let BottomIcon: CtrlIconType = {
            /** 图元类型 */
            type: PelType,
            /** 图元键 */
            key: SelectedKey,
            /** 标识 */
            label: "end",
            /** 位置 */
            coordinate: {
              x: pelInfo.place.end.x,
              y: pelInfo.place.end.y,
            },
            /** 光标 */
            cursor: "move",
            /** 图标 */
            icon: "circle",
            /** 属性 */
            pelInfo: pelInfo,
          };
          canvasStore.ctrlIconDataSet.push(BottomIcon);
        }
        if (PelType === "wrap" /*包*/) {
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          // 🐸 ★ ★ 移动图标
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          let MoveIcon: CtrlIconType = {
            /** 图元类型 */
            type: PelType,
            /** 图元键 */
            key: SelectedKey,
            /** 标识 */
            label: "moveFrame",
            /** 位置 */
            coordinate: {
              x: pelInfo.place.tl.x,
              y: pelInfo.place.tl.y,
            },
            /** 光标 */
            cursor: "move",
            /** 图标 */
            icon: "moveFrame",
            /** 属性 */
            pelInfo: pelInfo,
          };
          canvasStore.ctrlIconDataSet.push(MoveIcon);         
        }
        if (
          PelType === "rectangle" /*矩形*/ ||
          PelType === "divText" /*DIV文本*/ ||
          PelType === "svgImage" /*图片*/ ||
          PelType === "divBlock" /*DIV块*/
        ) {
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          // 🐸 ★ ★ 移动图标
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          let MoveIcon: CtrlIconType = {
            /** 图元类型 */
            type: PelType,
            /** 图元键 */
            key: SelectedKey,
            /** 标识 */
            label: "moveFrame",
            /** 位置 */
            coordinate: {
              x: pelInfo.place.tl.x,
              y: pelInfo.place.tl.y,
            },
            /** 光标 */
            cursor: "move",
            /** 图标 */
            icon: "moveFrame",
            /** 属性 */
            pelInfo: pelInfo,
          };
          canvasStore.ctrlIconDataSet.push(MoveIcon);
        }
        if (
          PelType === "circlePolygon" /*圆分多边形*/ ||
          PelType === "svgText" /*Svg文本*/
        ) {
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          // 🐸 ★ ★ 中点-控制图标
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          let middleIcon: CtrlIconType = {
            /** 图元类型 */
            type: PelType,
            /** 图元键 */
            key: SelectedKey,
            /** 标识 */
            label: "middle",
            /** 位置 */
            coordinate: {
              x: pelInfo.place.m.x,
              y: pelInfo.place.m.y,
            },
            /** 光标 */
            cursor: "move",
            /** 图标 */
            icon: "circle",
            /** 属性 */
            pelInfo: pelInfo,
          };
          canvasStore.ctrlIconDataSet.push(middleIcon);
        }
        if (
          PelType === "polygon" /*多边形*/ ||
          PelType === "polyline" /*折线*/ ||
          PelType === "path" /*路径*/
        ) {
          /** 点 */
          let Points = pelInfo.attrs.pathPoints.val;
         // console.log(Points)
          // 遍历点
          Points.forEach((Ponit: any, index: any) => {
            let TopIcon: CtrlIconType = {
              /** 图元类型 */
              type: PelType,
              /** 图元键 */
              key: SelectedKey,
              /** 标识 */
              label: `${index}`,
              /** 位置 */
              coordinate: {
                x: Ponit.x,
                y: Ponit.y,
              },
              /** 光标 */
              cursor: "move",
              /** 图标 */
              icon: "circle",
              /** 属性 */
              pelInfo: pelInfo,
            };
            canvasStore.ctrlIconDataSet.push(TopIcon);
          });
        }
      }
    }
  }

};

/** 动态显示 */
export const onDynamicShowPel = (coordinate: CoordinateType /*光标点*/) => {
 // console.log("㊣ 公共函数-动态显示");
  let PelType = String(canvasStore.drawPelType);
 // console.log(PelType);
  /**  动态绘制 */
  if (PelType === "horizontaLine" /*水平线*/) {
   // console.log(coordinate);
    d3.select("#DynamicShowPel")
      .select("line")
      .attr("stroke", canvasStore.selectedPen.stroke)
      .attr("stroke-width", canvasStore.selectedPen.stroke_width)
      .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
      .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
      .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
      .attr("opacity", canvasStore.selectedPen.opacity)
      .attr("x1", canvasStore.recordPoint[0].x)
      .attr("y1", canvasStore.recordPoint[0].y)
      .attr("x2", coordinate.x)
      .attr("y2", canvasStore.recordPoint[0].y);
  }
  if (PelType === "verticalLine" /*垂直线*/) {
    /**  动态绘制-垂直线 */
    d3.select("#DynamicShowPel")
      .select("line")
      .attr("stroke", canvasStore.selectedPen.stroke)
      .attr("stroke-width", canvasStore.selectedPen.stroke_width)
      .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
      .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
      .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
      .attr("opacity", canvasStore.selectedPen.opacity)
      .attr("x1", canvasStore.recordPoint[0].x)
      .attr("y1", canvasStore.recordPoint[0].y)
      .attr("x2", canvasStore.recordPoint[0].x)
      .attr("y2", coordinate.y);
  }
  if (PelType === "slantLine" /*斜线*/) {
    /**  动态绘制-斜线 */
    d3.select("#DynamicShowPel")
      .select("line")
      .attr("stroke", canvasStore.selectedPen.stroke)
      .attr("stroke-width", canvasStore.selectedPen.stroke_width)
      .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
      .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
      .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
      .attr("opacity", canvasStore.selectedPen.opacity)
      .attr("x1", canvasStore.recordPoint[0].x)
      .attr("y1", canvasStore.recordPoint[0].y)
      .attr("x2", coordinate.x)
      .attr("y2", coordinate.y);
  }
  if (PelType === "circle" /*圆*/) {
    /**  动态绘制-圆 */
    //计算圆半径
    /** 圆半径 */
    let CircleRadius = 0;
    /** 轴长X */
    let axisLenthX = Math.abs(canvasStore.recordPoint[0].x - coordinate.x);
    /** 轴长Y */
    let axisLenthY = Math.abs(canvasStore.recordPoint[0].y - coordinate.y);
    if (axisLenthX > axisLenthY) {
      CircleRadius = axisLenthX;
    } else if (axisLenthY > axisLenthX) {
      CircleRadius = axisLenthY;
    }
    d3.select("#DynamicShowPel")
      .select("circle")
      .attr("stroke", canvasStore.selectedPen.stroke)
      .attr("stroke-width", canvasStore.selectedPen.stroke_width)
      .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
      .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
      .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
      .attr("opacity", canvasStore.selectedPen.opacity)
      .attr("fill", canvasStore.selectedPen.fill)
      .attr("cx", canvasStore.recordPoint[0].x)
      .attr("cy", canvasStore.recordPoint[0].y)
      .attr("r", CircleRadius);
  }
  if (PelType === "ellipse" /*椭圆*/) {
    /**  动态绘制-椭圆 */
    if (canvasStore.recordPoint.length == 1) {
      /** 圆半径 */
      let CircleRadius = 0;
      /** 轴长X */
      let axisLenthX = Math.abs(canvasStore.recordPoint[0].x - coordinate.x);
      /** 轴长Y */
      let axisLenthY = Math.abs(canvasStore.recordPoint[0].y - coordinate.y);
      if (axisLenthX > axisLenthY) {
        CircleRadius = axisLenthX;
      } else if (axisLenthY > axisLenthX) {
        CircleRadius = axisLenthY;
      }
     // console.log(`半径==${CircleRadius}`);

      d3.select("#DynamicShowCircle")
        .attr("stroke", canvasStore.selectedPen.stroke)
        .attr("stroke-width", canvasStore.selectedPen.stroke_width)
        .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
        .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
        .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
        .attr("opacity", canvasStore.selectedPen.opacity)
        .attr("fill", canvasStore.selectedPen.fill)
        .select("circle")
        .attr("cx", canvasStore.recordPoint[0].x)
        .attr("cy", canvasStore.recordPoint[0].y)
        .attr("r", CircleRadius);
    } else if (canvasStore.recordPoint.length == 2) {
      //计算圆半径
      /** 圆半径1 */
      let radius1: number = 0;
      /** 轴长X */
      let radius1X = Math.abs(
        canvasStore.recordPoint[0].x - canvasStore.recordPoint[1].x
      );
      /** 轴长Y */
      let radius1Y = Math.abs(
        canvasStore.recordPoint[0].y - canvasStore.recordPoint[1].y
      );
      if (radius1X > radius1Y) {
        radius1 = radius1X;
      } else if (radius1Y > radius1X) {
        radius1 = radius1Y;
      }
     // console.log(`半径1==${radius1}`);
      /** 圆半径2 */
      let radius2: number = 0;
      /** 轴长X */
      let radius2X = Math.abs(canvasStore.recordPoint[0].x - coordinate.x);
      /** 轴长Y */
      let radius2Y = Math.abs(canvasStore.recordPoint[0].y - coordinate.y);
      if (radius2X > radius2Y) {
        radius2 = radius2X;
      } else if (radius2Y > radius2X) {
        radius2 = radius2Y;
      }
     // console.log(`半径2==${radius2}`);

      d3.select("#DynamicShowEllipse")
        .attr("stroke", canvasStore.selectedPen.stroke)
        .attr("stroke-width", canvasStore.selectedPen.stroke_width)
        .attr("fill", canvasStore.selectedPen.fill)
        .select("ellipse")
        .attr("cx", canvasStore.recordPoint[0].x)
        .attr("cy", canvasStore.recordPoint[0].y)
        .attr("rx", radius1)
        .attr("ry", radius2);
    }
  }
  if (PelType === "arc" /*三点弧线*/) {
    if (canvasStore.recordPoint.length == 1) {
      /**  动态绘制-斜线 */
      d3.select("#DynamicShowPel")
        .attr("stroke", canvasStore.selectedPen.stroke)
        .attr("stroke-width", canvasStore.selectedPen.stroke_width)
        .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
        .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
        .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
        .attr("opacity", canvasStore.selectedPen.opacity)
        .select("line")
        .attr("x1", canvasStore.recordPoint[0].x)
        .attr("y1", canvasStore.recordPoint[0].y)
        .attr("x2", coordinate.x)
        .attr("y2", coordinate.y);
    }
    if (canvasStore.recordPoint.length == 2) {
      /**
           * 二次贝塞尔曲线由一个起点、
           * 一个控制点和
           * 一个结束点来控制。
           * <path
              d="M20,20 Q100,50,80,120"
              style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"
              ></path>
           */
      let pathString = `M ${canvasStore.recordPoint[0].x},${canvasStore.recordPoint[0].y} Q${coordinate.x},${coordinate.y},${canvasStore.recordPoint[1].x},${canvasStore.recordPoint[1].y}`;
      let PathStyle = `fill:none;stroke:${canvasStore.selectedPen.stroke};stroke-width:${canvasStore.selectedPen.stroke_width};stroke-linejoin:round`;
      d3.select("#DynamicShowPel")
        .select("path")
        .attr("style", PathStyle)
        .attr("d", pathString);
    }
  }
  if (
    PelType === "rectangle" /*矩形*/ ||
    PelType === "divText" /*DIV文本*/ ||
    PelType === "svgImage" /*图片*/ ||
    PelType === "divBlock" /*DIV块*/
  ) {
    /**  动态绘制-矩形 */
    //计算矩形 差值
    /** 差值X */
    let DifferenceX = coordinate.x - canvasStore.recordPoint[0].x;
    /** 差值Y */
    let DifferenceY = coordinate.y - canvasStore.recordPoint[0].y;

    //计算矩形 长 ；宽 ；
    /*矩形宽度*/
    let RectWidth = Math.abs(DifferenceX);
    /*矩形高度*/
    let RectHeight = Math.abs(DifferenceY);
   // console.log(` 矩形宽度==${RectWidth};\n 矩形高度==${RectHeight}`);

    //计算矩形 基点；
    /*基点X*/
    let BasePointX;
    if (coordinate.x - canvasStore.recordPoint[0].x > 0) {
      BasePointX = canvasStore.recordPoint[0].x;
    } else {
      BasePointX = coordinate.x;
    }
    /*基点Y*/
    let BasePointY;
    if (coordinate.y - canvasStore.recordPoint[0].y > 0) {
      BasePointY = canvasStore.recordPoint[0].y;
    } else {
      BasePointY = coordinate.y;
    }
   // console.log(` 基点X==${BasePointX};\n 基点Y==${BasePointY}`);

    d3.select("#DynamicShowPel")
      .select("rect")
      .attr("stroke", canvasStore.selectedPen.stroke)
      .attr("stroke-width", canvasStore.selectedPen.stroke_width)
      .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
      .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
      .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
      .attr("opacity", canvasStore.selectedPen.opacity)
      .attr("fill", canvasStore.selectedPen.fill)
      .attr("width", RectWidth + "px")
      .attr("height", RectHeight + "px")
      .attr("x", BasePointX)
      .attr("y", BasePointY);
  }
  if (PelType === "circlePolygon" /*圆分多边形*/) {
    if (canvasStore.recordPoint.length == 1) {
      //计算圆半径
      /** 圆半径 */
      let CircleRadius = 0;
      /** 轴长X */
      let axisLenthX = Math.abs(canvasStore.recordPoint[0].x - coordinate.x);
      /** 轴长Y */
      let axisLenthY = Math.abs(canvasStore.recordPoint[0].y - coordinate.y);
      if (axisLenthX > axisLenthY) {
        CircleRadius = axisLenthX;
      } else if (axisLenthY > axisLenthX) {
        CircleRadius = axisLenthY;
      }
      d3.select("#DynamicShowPel")
        .select("circle")
        .attr("stroke", canvasStore.selectedPen.stroke)
        .attr("stroke-width", canvasStore.selectedPen.stroke_width)
        .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
        .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
        .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
        .attr("opacity", canvasStore.selectedPen.opacity)
        .attr("fill", canvasStore.selectedPen.fill)
        .attr("cx", canvasStore.recordPoint[0].x)
        .attr("cy", canvasStore.recordPoint[0].y)
        .attr("r", CircleRadius);
    }
  }
  if (PelType === "polygon" /*多边形*/) {
    canvasStore.tips = "绘制 多边形 指定点";
    let Lang = canvasStore.recordPoint.length;
    canvasStore.tips = `绘制 多边形 指定点${Lang + 1}`;
    if (Lang === 1) {
      /**  动态绘制-多边形 */
      d3.select("#DynamicShowLine")
        .select("line")
        .attr("stroke", canvasStore.selectedPen.stroke)
        .attr("stroke-width", canvasStore.selectedPen.stroke_width)
        .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
        .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
        .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
        .attr("x1", canvasStore.recordPoint[0].x)
        .attr("y1", canvasStore.recordPoint[0].y)
        .attr("x2", coordinate.x)
        .attr("y2", coordinate.y);
    }
    if (Lang > 1) {
      // 删除前面的线
      d3.select("#DynamicShowLine").remove();
      // 增加新线
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowLine")
        .append("line")
        .attr("stroke", canvasStore.selectedPen.stroke)
        .attr("stroke-width", canvasStore.selectedPen.stroke_width)
        .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
        .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
        .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
        .attr("x1", canvasStore.recordPoint[Lang - 1].x)
        .attr("y1", canvasStore.recordPoint[Lang - 1].y)
        .attr("x2", coordinate.x)
        .attr("y2", coordinate.y);

      // 删除前面的路径
      d3.select("#DynamicShowPath").remove();
      // 绘制以前的路径
      let pathPoints = canvasStore.recordPoint;
      let PathAdd = "";
      for (let index = 1; index < pathPoints.length; index++) {
        let X = pathPoints[index].x;
        let Y = pathPoints[index].y;
        PathAdd = PathAdd + `L${X},${Y} `;
      }
      /**  文本标记参数*/
      let pathString = `M ${pathPoints[0].x},${pathPoints[0].y} ` + PathAdd + "z";
     // console.log(pathString);
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPath")
        .append("path")
        .attr("stroke", canvasStore.selectedPen.stroke)
        .attr("stroke-width", canvasStore.selectedPen.stroke_width)
        .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
        .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
        .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
        .attr("fill", "rgba(0,0,0,0)")
        .attr("d", pathString);
    }
  }
  if (PelType === "polyline" /*折线*/) {
    canvasStore.tips = "绘制 折线 指定点";
    let Lang = canvasStore.recordPoint.length;
    canvasStore.tips = `绘制 折线 指定点${Lang + 1}`;
    if (Lang === 1) {
      /**  动态绘制-线 */
      d3.select("#DynamicShowLine")
        .select("line")
        .attr("stroke", canvasStore.selectedPen.stroke)
        .attr("stroke-width", canvasStore.selectedPen.stroke_width)
        .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
        .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
        .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
        .attr("x1", canvasStore.recordPoint[0].x)
        .attr("y1", canvasStore.recordPoint[0].y)
        .attr("x2", coordinate.x)
        .attr("y2", coordinate.y);
    }
    if (Lang > 1) {
      // 删除前面的线
      d3.select("#DynamicShowLine").remove();
      // 增加新线
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowLine")
        .append("line")
        .attr("stroke", canvasStore.selectedPen.stroke)
        .attr("stroke-width", canvasStore.selectedPen.stroke_width)
        .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
        .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
        .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
        .attr("x1", canvasStore.recordPoint[Lang - 1].x)
        .attr("y1", canvasStore.recordPoint[Lang - 1].y)
        .attr("x2", coordinate.x)
        .attr("y2", coordinate.y);

      // 删除前面的路径
      d3.select("#DynamicShowPath").remove();
      // 绘制以前的路径
      let pathPoints = canvasStore.recordPoint;
      let PathAdd = "";
      for (let index = 1; index < pathPoints.length; index++) {
        let X = pathPoints[index].x;
        let Y = pathPoints[index].y;
        PathAdd = PathAdd + `L${X},${Y} `;
      }
      /**  文本标记参数*/
      let pathString = `M ${pathPoints[0].x},${pathPoints[0].y} ` + PathAdd;
     // console.log(pathString);
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPath")
        .append("path")
        .attr("stroke", canvasStore.selectedPen.stroke)
        .attr("stroke-width", canvasStore.selectedPen.stroke_width)
        .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
        .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
        .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
        .attr("fill", "rgba(0,0,0,0)")
        .attr("d", pathString);
    }
  }
  if (PelType === "path" /*路径*/) {
    canvasStore.tips = "绘制 路径 指定点";
    let Lang = canvasStore.recordPoint.length;
    canvasStore.tips = `绘制 路径 指定点${Lang + 1}`;
    if (Lang === 1) {
      /**  动态绘制-线 */
      d3.select("#DynamicShowLine")
        .select("line")
        .attr("stroke", canvasStore.selectedPen.stroke)
        .attr("stroke-width", canvasStore.selectedPen.stroke_width)
        .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
        .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
        .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
        .attr("x1", canvasStore.recordPoint[0].x)
        .attr("y1", canvasStore.recordPoint[0].y)
        .attr("x2", coordinate.x)
        .attr("y2", coordinate.y);
    }
    if (Lang > 1) {
      // 删除前面的线
      d3.select("#DynamicShowLine").remove();
      // 增加新线
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowLine")
        .append("line")
        .attr("stroke", canvasStore.selectedPen.stroke)
        .attr("stroke-width", canvasStore.selectedPen.stroke_width)
        .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
        .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
        .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
        .attr("x1", canvasStore.recordPoint[Lang - 1].x)
        .attr("y1", canvasStore.recordPoint[Lang - 1].y)
        .attr("x2", coordinate.x)
        .attr("y2", coordinate.y);

      // 删除前面的路径
      d3.select("#DynamicShowPath").remove();
      // 绘制以前的路径
      let pathPoints = canvasStore.recordPoint;
      let PathAdd = "";
      for (let index = 1; index < pathPoints.length; index++) {
        let X = pathPoints[index].x;
        let Y = pathPoints[index].y;
        PathAdd = PathAdd + `L${X},${Y} `;
      }
      /**  文本标记参数*/
      let pathString = `M ${pathPoints[0].x},${pathPoints[0].y} ` + PathAdd;
     // console.log(pathString);
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPath")
        .append("path")
        .attr("stroke", canvasStore.selectedPen.stroke)
        .attr("stroke-width", canvasStore.selectedPen.stroke_width)
        .attr("stroke-dasharray", canvasStore.selectedPen.stroke_dasharray)
        .attr("stroke-dashoffset", canvasStore.selectedPen.stroke_dashoffset)
        .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
        .attr("fill", "rgba(0,0,0,0)")
        .attr("d", pathString);
    }
  }

};

/** 显示捕捉-线 */
export const onShowCatchLine = () => {
 // console.log(`图元显示-显示线`);
};

/** 显示捕捉-端点 */
export const onShowCatchExtremity = () => {
 // console.log(`图元显示-捕捉端点`);
};